import React from 'react'
import { Menu } from './components/Menu';
import { Routes, Route } from 'react-router-dom';
import { About } from './components/About';
import { Home } from './components/Home';
import { Student } from './components/Student';
import { Hello } from './components/Hello';
import { Hello1 } from './components/Hello1';

function App() {
  return (
    <div>
      <h1>App</h1>
      <Menu></Menu>
      {/* 
        1. 需要用Routes容器将Route包裹
        2. element代替component、render、children来指定要挂载的组件
      */}
      <Routes>
        <Route path="/" element={<Home></Home>}></Route>
        <Route path="about" element={<About></About>}>
          {/* 
            嵌套路由 结合Outlet使用
          */}
          <Route path="hello" element={<Hello></Hello>}></Route>
          <Route path="hello1" element={<Hello1></Hello1>}></Route>
        </Route>
        <Route path="student/:id" element={<Student></Student>}></Route>
      </Routes>
    </div>
  )
}
export default App;
